<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" href="/css/pintuer.css">
    <link rel="stylesheet" href="/css/admin.css">
    <link rel="stylesheet" href="/layui2/css/layui.css">
    <script src="/js/jquery.js"></script>
    <script src="/js/pintuer.js"></script>
    <script src="/layui2/layui.js"></script>
</head>
<body>

<div class="demoTable">
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
</div>

<table class="layui-hide" id="layuiTable" lay-filter="parking"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>

<script type="text/javascript">

    // 表格
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#layuiTable'
            , url: '/parking/list'
            , parseData: function (res) {
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.records //解析数据列表
                }
            }
            , method: 'post'
            , contentType: 'application/json'
            // , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                {field: 'parkingId', width: '5%', title: 'ID'}
                , {field: 'parkingCode', width: '8%', title: '车位编号'}
                , {field: 'parkingUser', width: '8%', title: '使用人'}
                , {field: 'parkingPhone', width: '10%', title: '电话'}
                , {field: 'carNum', width: '10%', title: '车牌号'} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                , {field: 'parkingAmount', width: '8%', title: '车位费'}
                , {field: 'parkingTypeName', width: '6%', title: '费用类型'}
                , {
                    field: 'parkingTime',
                    width: '12%',
                    title: '停车时间',
                    templet: '<div>{{ Format(d.parkingTime,"yyyy-MM-dd hh:mm:ss")}}</div>'
                }
                , {
                    field: 'parkingEnd',
                    width: '12%',
                    title: '截止时间',
                    templet: '<div>{{ Format(d.parkingTime,"yyyy-MM-dd hh:mm:ss")}}</div>'
                }
                , {
                    field: 'createTime',
                    width: '12%',
                    title: '创建时间',
                    templet: '<div>{{ Format(d.parkingTime,"yyyy-MM-dd hh:mm:ss")}}</div>'
                }
                , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
            ]]
            , page: true
            , id: 'testReload'
        });

        //监听工具条
        table.on('tool(parking)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        type: 'GET',
                        url: "/parking/delete/" + data.parkingId,
                        data: {},
                        dataType: "json",
                        contentType: "application/json",
                        success: function (data) {
                            obj.del();
                            layer.close(index);
                            table.reload("testReload");
                        }, error: function (data) {
                            layer.msg(JSON.stringify(data));
                        }
                    })
                });
            } else if (obj.event === 'edit') {
                // layer.alert('编辑行：<br>' + JSON.stringify(data))
                layer.open({
                    type: 2,
                    title: '修改信息',
                    area: ['60%', '80%'], //宽高
                    fix: false, //不固定
                    maxmin: true,
                    content: '/parking/updatePage/' + data.parkingId,
                    end: function () {
                        table.reload("testReload");
                    }
                });
                // this.layerIndex = index;
            }
        });

        //表格重载
        var $ = layui.$, active = {
            reload: function () {
                var demoReload = $('#demoReload');

                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        key: demoReload.val()
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });

    function Format(datetime, fmt) {
        if (parseInt(datetime) == datetime) {
            if (datetime.length == 10) {
                datetime = parseInt(datetime) * 1000;
            } else if (datetime.length == 13) {
                datetime = parseInt(datetime);
            }
        }
        datetime = new Date(datetime);
        var o = {
            "M+": datetime.getMonth() + 1,                 //月份
            "d+": datetime.getDate(),                    //日
            "h+": datetime.getHours(),                   //小时
            "m+": datetime.getMinutes(),                 //分
            "s+": datetime.getSeconds(),                 //秒
            "q+": Math.floor((datetime.getMonth() + 3) / 3), //季度
            "S": datetime.getMilliseconds()             //毫秒
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (datetime.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }

</script>
</body>
</html>